import 'package:flutter/material.dart';

// 程序入口，启动 Flutter 应用
void main() {
  runApp(const MyApp());
}

// 应用的主类，继承 StatelessWidget，因为应用本身不管理状态
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '开关与复选框示例', // 更简洁的中文
      theme: ThemeData(
        primarySwatch: Colors.teal, // 主题色 teal
        switchTheme: SwitchThemeData(
          thumbColor: WidgetStateProperty.all(Colors.tealAccent), // ：自定义开关颜色
        ),
      ),
      home: const HomePage(),
    );
  }
}

// 主页面，包含 Scaffold 和 SwitchAndCheckBoxTestRoute
class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('开关与复选框演示'), // ：标题稍作调整
        centerTitle: true, // ：标题居中
      ),
      body: const Center(child: SwitchAndCheckBoxTestRoute()),
    );
  }
}

// 状态管理页面，展示 Switch 和 Checkbox 的交互
class SwitchAndCheckBoxTestRoute extends StatefulWidget {
  const SwitchAndCheckBoxTestRoute({super.key});

  @override
  _SwitchAndCheckBoxTestRouteState createState() =>
      _SwitchAndCheckBoxTestRouteState();
}

class _SwitchAndCheckBoxTestRouteState
    extends State<SwitchAndCheckBoxTestRoute> {
  bool _switchSelected = true; // 开关的初始状态
  bool _checkboxSelected = true; // 复选框的初始状态

  // 显示 SnackBar 提供交互反馈
  void _showSnackBar(BuildContext context, String message) {
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(
        content: Text(message),
        duration: const Duration(seconds: 1), // ：设置提示时长
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.min, // 使 Column 只占用必要空间
      children: <Widget>[
        // 开关组件
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text(
              '开关:', // ：添加标签
              style: TextStyle(fontSize: 18),
            ),
            const SizedBox(width: 8), // ：添加间距
            Switch(
              value: _switchSelected,
              onChanged: (value) {
                setState(() {
                  _switchSelected = value;
                  _showSnackBar(
                    context,
                    '开关状态: ${value ? '开启' : '关闭'}',
                  ); // ：添加反馈
                });
              },
            ),
          ],
        ),
        const SizedBox(height: 16), // ：增加间距
        // 复选框组件
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text(
              '复选框:', // ：添加标签
              style: TextStyle(fontSize: 18),
            ),
            const SizedBox(width: 8),
            Checkbox(
              value: _checkboxSelected,
              activeColor: Colors.pink, // ：更改复选框颜色
              onChanged: (value) {
                if (value != null) {
                  // 检查空值
                  setState(() {
                    _checkboxSelected = value;
                    _showSnackBar(
                      context,
                      '复选框状态: ${value ? '选中' : '未选中'}',
                    ); // ：添加反馈
                  });
                }
              },
            ),
          ],
        ),
      ],
    );
  }
}
